<div class="unit-summary-wrap">
  <div class="title">单元练习汇总</div>
  <canvas id="summary-chart" class="summary-chart"></canvas>
  <div class="advise">部分知识点还需巩固，建议强化重做以下课程练习:</div>
  <div id="advise-list" class="advise-list"></div>
  <script type="text/javascript" src="{{env('CDN_RESOURCE')}}/mobile/report/js/summary-chart.js"></script>
  <script type="text/javascript">
    $(function(){
      var summary = {
        grammar: 67,
        listening: 80,
        pronunciation: 97,
        reading: 80,
        vocabulary: 43,
        overall: 88
      };
      var clientWidth = document.documentElement.clientWidth;
      var canvas = document.getElementById("summary-chart")
      drawSummaryChart.init({
        canvas: canvas,
        width: clientWidth,
        height: clientWidth,
        summary: summary,
        offset: {
          x: clientWidth / 2,
          y: -clientWidth / 2 - 20
        }
      });

      var adviseHtml = '', adviseList = ['Lesson 21', 'Lesson 24', 'Lesson 29', 'Lesson 21', 'Lesson 24', 'Lesson 29'];
      $.each(adviseList, function (index, advise) {
        adviseHtml +=  '<div class="advise-item">' + advise + '</div>';
      });
      $('#advise-list').append(adviseHtml);
    });
  </script>
</div>